<template >
     <div id="divPosition">
        <span class="navigation">
            <li v-for="news in newsList">
                <button  @click="toNews(news)">{{ news.title }}</button>
            </li>
        </span>
        <span class="content"><RouterView/></span>
    </div>
</template>

<script lang="ts">
export default {
    name:'News'
}
</script>

<script setup lang="ts">
import { RouterView } from 'vue-router';
import { useRouter } from 'vue-router';
let newsList = [{ id: 1, title: '一只狗', content: '漂亮小狗狗' },
    { id: 2, title: '震惊', content: '哈哈哈' }]

const router = useRouter()
function toNews(val: { id: number, title: string, content: string }) { 
    //编程式路由跳转
    router.push({path:'/news/details',query:val})
}            
</script>

<style lang="css">
    #divPosition{
        display: flex;
    }
    .navigation{
        border: 1px solid black;
        width: 100px;
        height: 400px;
        background-color: blanchedalmond;
        margin-top: 50px;
         margin-left: 20px;
         margin-right: 20px;
    }
    .navigation li{
        margin-left: 20px;
    }
    .content{
        border: 1px solid black;
        width: 400px;
        height: 400px;
        margin-top: 50px;
    }
</style>